<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('申请单') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('申请标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('费用类型') }}</td>
        <td>
          {{ formatTypesFee(form.typesFee) }}
        </td>
        <td class="tit">{{ $t('发生时间') }}</td>
        <td>{{ parseTime(form.applyTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('费用金额(元)') }}</td>
        <td>
          {{ moneyFormat(form.amountMoney) }}
        </td>
        <td class="tit">{{ $t('费用归属') }}</td>
        <td>
          {{ formatCostAttribution(form.costAttribution) }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('分摊项目') }}</td>
        <td>
          {{ formatShareItem(form.shareItem) }}
        </td>
        <td class="tit">
          <span v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">
            {{ $t('付款完成时间') }}
          </span>
        </td>
        <td>
          <span v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">
            {{ parseTime(form.payCompletionTime) }}
          </span>
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('备注') }}</td>
        <td colspan="3">
          {{ form.costsThat }}
        </td>
      </tr>
    </table>

    <div>
      <div v-if="form.fundExpenseDetailList && form.fundExpenseDetailList.length > 0" class="area-header">
        <span class="area-header-title">{{ $t('费用明细') }}</span>
      </div>
      <ul class="detailList">
        <li v-for="(item, index) in form.fundExpenseDetailList" :key="index">
          <div v-if="item.fileList !== null && item.fileList !== '' && item.fileList !== undefined" class="divBor">
            <p>{{ $t('发票') }}:</p>
            <p class="linka">{{ item.fileList.name }}</p>
          </div>
          <div class="divBor">
            <p>{{ $t('部门') }}:</p>
            <p>
              <DeptSelect v-model="item.department" />
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('金额(元)') }}:</p>
            <p>
              {{ moneyFormat(item.money) }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('费用类型') }}:</p>
            <p>
              <el-cascader v-model="item.typeArray" :options="getFdSubjectList" clearable>
                <template slot-scope="{ node, data }">
                  <span>{{ $t(data.label) }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('发生时间') }}:</p>
            <p>
              {{ parseTime(item.time) }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('发票代码') }}:</p>
            <p>
              {{ item.invoiceId }}
            </p>
          </div>
          <div class="divBor">
            <p>{{ $t('备注') }}:</p>
            <p>
              {{ item.remark }}
            </p>
          </div>

        </li>
      </ul>
    </div>

    <FileView :list.sync="form.fileList" data-type="fund_expense" :business-id="autoBusinessId($route.query.id, form)" :btn-show="!otherBtnHide" />

  </div>
</template>

<script>
    import { getFundExpense } from '@/api/fund/expense/fundExpense'
    import { getFdSubjectList } from '@/api/fd/config/getTypeMain'
    import { listDealInvestmentAll } from '@/api/deal/investment/dealInvestment.js'
    export default {
        components: {
        },
        data() {
            return {
                // 是否隐藏保存按钮
                btnHide: false,
                // 是否隐藏其它按钮
                otherBtnHide: false,

                // 表单参数
                form: {
                  // 费用明细
                  fundExpenseDetailList: [],
                  fileList: undefined
                },

                // 遮罩层
                loading: false,
                // 操作按钮默认不展示
                buttonShow: true,
                // 付款大类
                getFdSubjectList: [],
                // 费用类型
                typesFeeOptions: [],
                // 费用归属
                costAttributionOptions: [],
                // 分摊项目
                shareItemOptions: [],
                // 上传文件
                fileList: undefined,
                // 是否显示上传按钮
                isShowUploadBtn: true,
                deptOptions: [],
                // 上传路径
                uploadUrl: undefined
            }
        },
        created() {
            // 付款大类
            getFdSubjectList('expense').then(response => {
              this.getFdSubjectList = this.changeSubjectList(response.data)
            })
            // 费用类型
            this.getDicts('fund_expense_type_fee').then(response => {
              this.typesFeeOptions = response.data
            })
            // 费用归属
            this.getDicts('fund_expense_cost_attribution').then(response => {
              this.costAttributionOptions = response.data
            })
            this.$bus.$emit('async_done')
        },
        methods: {
            changeSubjectList(val) {
              const arr = []
              if (val.length !== 0) {
                val.forEach(item => {
                  const obj = {}
                  obj.value = item.value
                  obj.label = this.$t(item.label)
                if (item.children && item.children.length > 0) {
                    obj.children = this.changeSubjectList(item.children)
                  }
                  arr.push(obj)
                })
              }
              return arr
            },
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getFundExpense(data.id).then(response => {
                        this.form = response.data
                        this.apportionmentItemSelect()
                        this.loading = false
                   })
                }
            },

            // 计算报销总额
            getSummaries() {
              let sum = 0
              if (this.form.fundExpenseDetailList !== null && this.form.fundExpenseDetailList !== undefined && this.form.fundExpenseDetailList.length > 0) {
                this.form.fundExpenseDetailList.forEach(itemS => {
                  if (itemS.money !== undefined && itemS.money !== null && itemS.money !== '') {
                    sum += itemS.money
                  }
                })
                this.$set(this.form, 'amountMoney', sum)
              }
              return sum
            },
            formatTypesFee(column) {
              return this.selectDictLabel(this.typesFeeOptions, column)
            },
            formatCostAttribution(column) {
              return this.selectDictLabel(this.costAttributionOptions, column)
            },
            // 分摊项目下拉
            apportionmentItemSelect() {
              this.shareItemOptions = []
              var fundId = this.form.fundId
              if (fundId === undefined || fundId === null || fundId === '') {
                fundId = this.$route.query.id
              }
              listDealInvestmentAll({ investorId: fundId }).then(response => {
                console.log(response.data)
                if (response.data !== null && response.data !== undefined) {
                  response.data.forEach(item => {
                    const option = {
                      dictLabel: item.dealName,
                      dictValue: item.dealId
                    }
                    this.shareItemOptions.push(option)
                  })
                }
              })
            },
            formatShareItem(column) {
              return this.selectDictLabel(this.shareItemOptions, column)
            }

        }
    }
</script>
